/*

 @Name: layui WebIM 1.0.0
 @Author：贤心
 @Date: 2014-04-25
 @Blog: http://sentsin.com

 */

;!function (win, undefined) {

  var config = {
    msgurl: 'mailbox.html?msg=',
    chatlogurl: 'mailbox.html?user=',
    aniTime: 200,
    right: -232,
    api: {
      friend: 'js/plugins/layer/layim/data/friend.json', //好友列表接口
      group: 'js/plugins/layer/layim/data/group.json', //群组列表接口
      chatlog: 'js/plugins/layer/layim/data/chatlog.json', //聊天记录接口
      groups: 'js/plugins/layer/layim/data/groups.json', //群组成员接口
      sendurl: '' //发送消息接口
    },
    user: { //当前用户信息
      name: '游客',
      face: 'img/a1.jpg'
    },

    //自动回复内置文案，也可动态读取数据库配置
    autoReplay: [
      '您好，我现在有事不在，一会再和您联系。',
      '你没发错吧？',
      '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！',
      '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。',
      '我正在拉磨，没法招呼您，因为我们家毛驴去动物保护协会把我告了，说我剥夺它休产假的权利。',
      '<（@￣︶￣@）>',
      '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
      '主人正在开机自检，键盘鼠标看好机会出去凉快去了，我是他的电冰箱，我打字比较慢，你慢慢说，别急……',
      '(*^__^*) 嘻嘻，是贤心吗？'
    ],

    chating: {},
    hosts: (function () {
      var dk = location.href.match(/\:\d+/);
      dk = dk ? dk[0] : '';
      return 'http://' + document.domain + dk + '/';
    })(),
    json: function (url, data, callback, error) {
      return $.ajax({
        type: 'POST',
        url: url,
        data: data,
        dataType: 'json',
        success: callback,
        error: error
      });
    },
    stopMP: function (e) {
      e ? e.stopPropagation() : e.cancelBubble = true;
    }
  }, dom = [$(window), $(document), $('html'), $('body')], xxim = {};

//主界面tab
  xxim.tabs = function (index) {
    var node = xxim.node;
    node.tabs.eq(index).addClass('xxim_tabnow').siblings().removeClass(
        'xxim_tabnow');
    node.list.eq(index).show().siblings('.xxim_list').hide();
    if (node.list.eq(index).find('li').length === 0) {
      xxim.getDates(index);
    }
  };

//节点
  xxim.renode = function () {
    var node = xxim.node = {
      tabs: $('#xxim_tabs>span'),
      list: $('.xxim_list'),
      online: $('.xxim_online'),
      setonline: $('.xxim_setonline'),
      onlinetex: $('#xxim_onlinetex'),
      xximon: $('#xxim_on'),
      layimFooter: $('#xxim_bottom'),
      xximHide: $('#xxim_hide'),
      xximSearch: $('#xxim_searchkey'),
      searchMian: $('#xxim_searchmain'),
      closeSearch: $('#xxim_closesearch'),
      layimMin: $('#layim_min')
    };
  };

//主界面缩放
  xxim.expend = function () {
    var node = xxim.node;
    if (xxim.layimNode.attr('state') !== '1') {
      xxim.layimNode.stop().animate({right: config.right}, config.aniTime,
          function () {
            node.xximon.addClass('xxim_off');
            try {
              localStorage.layimState = 1;
            } catch (e) {
            }
            xxim.layimNode.attr({state: 1});
            node.layimFooter.addClass('xxim_expend').stop().animate(
                {marginLeft: config.right}, config.aniTime / 2);
            node.xximHide.addClass('xxim_show');
          });
    } else {
      xxim.layimNode.stop().animate({right: 1}, config.aniTime, function () {
        node.xximon.removeClass('xxim_off');
        try {
          localStorage.layimState = 2;
        } catch (e) {
        }
        xxim.layimNode.removeAttr('state');
        node.layimFooter.removeClass('xxim_expend');
        node.xximHide.removeClass('xxim_show');
      });
      node.layimFooter.stop().animate({marginLeft: 0}, config.aniTime);
    }
  };

//初始化窗口格局
  xxim.layinit = function () {
    var node = xxim.node;

    //主界面
    try {
      /*
      if(!localStorage.layimState){
          config.aniTime = 0;
          localStorage.layimState = 1;
      }
      */
      if (localStorage.layimState === '1') {
        xxim.layimNode.attr({state: 1}).css({right: config.right});
        node.xximon.addClass('xxim_off');
        node.layimFooter.addClass('xxim_expend').css(
            {marginLeft: config.right});
        node.xximHide.addClass('xxim_show');
      }
    } catch (e) {
      //layer.msg(e.message, 5, -1);
    }
  };

//聊天窗口
  xxim.popchat = function (param) {
    var node = xxim.node, log = {};

    log.success = function (layero) {
      layer.setMove();

      xxim.chatbox = layero.find('#layim_chatbox');
      log.chatlist = xxim.chatbox.find('.layim_chatmore>ul');

      log.chatlist.html('<li data-id="' + param.id + '" type="' + param.type
          + '"  id="layim_user' + param.type + param.id + '"><span>'
          + param.name + '</span><em>×</em></li>')
      xxim.tabchat(param, xxim.chatbox);

      //最小化聊天窗
      xxim.chatbox.find('.layer_setmin').on('click', function () {
        var indexs = layero.attr('times');
        layero.hide();
        node.layimMin.text(xxim.nowchat.name).show();
      });

      //关闭窗口
      xxim.chatbox.find('.layim_close').on('click', function () {
        var indexs = layero.attr('times');
        layer.close(indexs);
        xxim.chatbox = null;
        config.chating = {};
        config.chatings = 0;
      });

      //关闭某个聊天
      log.chatlist.on('mouseenter', 'li', function () {
        $(this).find('em').show();
      }).on('mouseleave', 'li', function () {
        $(this).find('em').hide();
      });
      log.chatlist.on('click', 'li em', function (e) {
        var parents = $(this).parent(), dataType = parents.attr('type');
        var dataId = parents.attr('data-id'), index = parents.index();
        var chatlist = log.chatlist.find('li'), indexs;

        config.stopMP(e);

        delete config.chating[dataType + dataId];
        config.chatings--;

        parents.remove();
        $('#layim_area' + dataType + dataId).remove();
        if (dataType === 'group') {
          $('#layim_group' + dataType + dataId).remove();
        }

        if (parents.hasClass('layim_chatnow')) {
          if (index === config.chatings) {
            indexs = index - 1;
          } else {
            indexs = index + 1;
          }
          xxim.tabchat(
              config.chating[chatlist.eq(indexs).attr('type') + chatlist.eq(
                  indexs).attr('data-id')]);
        }

        if (log.chatlist.find('li').length === 1) {
          log.chatlist.parent().hide();
        }
      });

      //聊天选项卡
      log.chatlist.on('click', 'li', function () {
        var othis = $(this), dataType = othis.attr('type'),
            dataId = othis.attr('data-id');
        xxim.tabchat(config.chating[dataType + dataId]);
      });

      //发送热键切换
      log.sendType = $('#layim_sendtype'), log.sendTypes = log.sendType.find(
          'span');
      $('#layim_enter').on('click', function (e) {
        config.stopMP(e);
        log.sendType.show();
      });
      log.sendTypes.on('click', function () {
        log.sendTypes.find('i').text('')
        $(this).find('i').text('√');
      });

      xxim.transmit();
    };

    log.html = '<div class="layim_chatbox" id="layim_chatbox">'
        + '<h6>'
        + '<span class="layim_move"></span>'
        + '    <a href="' + param.url
        + '" class="layim_face" target="_blank"><img src="' + param.face
        + '" ></a>'
        + '    <a href="' + param.url + '" class="layim_names" target="_blank">'
        + param.name + '</a>'
        + '    <span class="layim_rightbtn">'
        + '        <i class="layer_setmin">—</i>'
        + '        <i class="layim_close">&times;</i>'
        + '    </span>'
        + '</h6>'
        + '<div class="layim_chatmore" id="layim_chatmore">'
        + '    <ul class="layim_chatlist"></ul>'
        + '</div>'
        + '<div class="layim_groups" id="layim_groups"></div>'
        + '<div class="layim_chat">'
        + '    <div class="layim_chatarea" id="layim_chatarea">'
        + '        <ul class="layim_chatview layim_chatthis"  id="layim_area'
        + param.type + param.id + '"></ul>'
        + '    </div>'
        + '    <div class="layim_tool">'
        + '        <i class="layim_addface fa fa-meh-o" title="发送表情"></i>'
        + '        <a href="javascript:;"><i class="layim_addimage fa fa-picture-o" title="上传图片"></i></a>'
        + '        <a href="javascript:;"><i class="layim_addfile fa fa-paperclip" title="上传附件"></i></a>'
        + '        <a href="" target="_blank" class="layim_seechatlog"><i class="fa fa-comment-o"></i>聊天记录</a>'
        + '    </div>'
        + '    <textarea class="layim_write" id="layim_write"></textarea>'
        + '    <div class="layim_send">'
        + '        <div class="layim_sendbtn" id="layim_sendbtn">发送<span class="layim_enter" id="layim_enter"><em class="layim_zero"></em></span></div>'
        + '        <div class="layim_sendtype" id="layim_sendtype">'
        + '            <span><i>√</i>按Enter键发送</span>'
        + '            <span><i></i>按Ctrl+Enter键发送</span>'
        + '        </div>'
        + '    </div>'
        + '</div>'
        + '</div>';

    if (config.chatings < 1) {
      $.layer({
        type: 1,
        border: [0],
        title: false,
        shade: [0],
        area: ['620px', '493px'],
        move: '.layim_chatbox .layim_move',
        moveType: 1,
        closeBtn: false,
        offset: [(($(window).height() - 493) / 2) + 'px', ''],
        page: {
          html: log.html
        }, success: function (layero) {
          log.success(layero);
        }
      })
    } else {
      log.chatmore = xxim.chatbox.find('#layim_chatmore');
      log.chatarea = xxim.chatbox.find('#layim_chatarea');

      log.chatmore.show();

      log.chatmore.find('ul>li').removeClass('layim_chatnow');
      log.chatmore.find('ul').append(
          '<li data-id="' + param.id + '" type="' + param.type
          + '" id="layim_user' + param.type + param.id
          + '" class="layim_chatnow"><span>' + param.name
          + '</span><em>×</em></li>');

      log.chatarea.find('.layim_chatview').removeClass('layim_chatthis');
      log.chatarea.append(
          '<ul class="layim_chatview layim_chatthis" id="layim_area'
          + param.type + param.id + '"></ul>');

      xxim.tabchat(param);
    }

    //群组
    log.chatgroup = xxim.chatbox.find('#layim_groups');
    if (param.type === 'group') {
      log.chatgroup.find('ul').removeClass('layim_groupthis');
      log.chatgroup.append(
          '<ul class="layim_groupthis" id="layim_group' + param.type + param.id
          + '"></ul>');
      xxim.getGroups(param);
    }
    //点击群员切换聊天窗
    log.chatgroup.on('click', 'ul>li', function () {
      xxim.popchatbox($(this));
    });
  };

//定位到某个聊天队列
  xxim.tabchat = function (param) {
    var node = xxim.node, log = {}, keys = param.type + param.id;
    xxim.nowchat = param;

    xxim.chatbox.find('#layim_user' + keys).addClass(
        'layim_chatnow').siblings().removeClass('layim_chatnow');
    xxim.chatbox.find('#layim_area' + keys).addClass(
        'layim_chatthis').siblings().removeClass('layim_chatthis');
    xxim.chatbox.find('#layim_group' + keys).addClass(
        'layim_groupthis').siblings().removeClass('layim_groupthis');

    xxim.chatbox.find('.layim_face>img').attr('src', param.face);
    xxim.chatbox.find('.layim_face, .layim_names').attr('href', param.href);
    xxim.chatbox.find('.layim_names').text(param.name);

    xxim.chatbox.find('.layim_seechatlog').attr('href',
        config.chatlogurl + param.id);

    log.groups = xxim.chatbox.find('.layim_groups');
    if (param.type === 'group') {
      log.groups.show();
    } else {
      log.groups.hide();
    }

    $('#layim_write').focus();

  };

//弹出聊天窗
  xxim.popchatbox = function (othis) {
    var node = xxim.node, dataId = othis.attr('data-id'), param = {
      id: dataId, //用户ID
      type: othis.attr('type'),
      name: othis.find('.xxim_onename').text(),  //用户名
      face: othis.find('.xxim_oneface').attr('src'),  //用户头像
      href: 'profile.html?user=' + dataId //用户主页
    }, key = param.type + dataId;
    if (!config.chating[key]) {
      xxim.popchat(param);
      config.chatings++;
    } else {
      xxim.tabchat(param);
    }
    config.chating[key] = param;

    var chatbox = $('#layim_chatbox');
    if (chatbox[0]) {
      node.layimMin.hide();
      chatbox.parents('.xubox_layer').show();
    }
  };

//请求群员
  xxim.getGroups = function (param) {
    var keys = param.type + param.id, str = '',
        groupss = xxim.chatbox.find('#layim_group' + keys);
    groupss.addClass('loading');
    config.json(config.api.groups, {}, function (datas) {
      if (datas.status === 1) {
        var ii = 0, lens = datas.data.length;
        if (lens > 0) {
          for (; ii < lens; ii++) {
            str += '<li data-id="' + datas.data[ii].id
                + '" type="one"><img src="' + datas.data[ii].face
                + '" class="xxim_oneface"><span class="xxim_onename">'
                + datas.data[ii].name + '</span></li>';
          }
        } else {
          str = '<li class="layim_errors">没有群员</li>';
        }

      } else {
        str = '<li class="layim_errors">' + datas.msg + '</li>';
      }
      groupss.removeClass('loading');
      groupss.html(str);
    }, function () {
      groupss.removeClass('loading');
      groupss.html('<li class="layim_errors">请求异常</li>');
    });
  };

//消息传输
  xxim.transmit = function () {
    var node = xxim.node, log = {};
    node.sendbtn = $('#layim_sendbtn');
    node.imwrite = $('#layim_write');

    //发送
    log.send = function () {
      var data = {
        content: node.imwrite.val(),
        id: xxim.nowchat.id,
        sign_key: '', //密匙
        _: +new Date
      };

      if (data.content.replace(/\s/g, '') === '') {
        layer.tips('说点啥呗！', '#layim_write', 2);
        node.imwrite.focus();
      } else {
        //此处皆为模拟
        var keys = xxim.nowchat.type + xxim.nowchat.id;

        //聊天模版
        log.html = function (param, type) {
          return '<li class="' + (type === 'me' ? 'layim_chateme' : '') + '">'
              + '<div class="layim_chatuser">'
              + function () {
                if (type === 'me') {
                  return '<span class="layim_chattime">' + param.time
                      + '</span>'
                      + '<span class="layim_chatname">' + param.name + '</span>'
                      + '<img src="' + param.face + '" >';
                } else {
                  return '<img src="' + param.face + '" >'
                      + '<span class="layim_chatname">' + param.name + '</span>'
                      + '<span class="layim_chattime">' + param.time
                      + '</span>';
                }
              }()
              + '</div>'
              + '<div class="layim_chatsay">' + param.content
              + '<em class="layim_zero"></em></div>'
              + '</li>';
        };

        log.imarea = xxim.chatbox.find('#layim_area' + keys);

        log.imarea.append(log.html({
          time: '2014-04-26 0:37',
          name: config.user.name,
          face: config.user.face,
          content: data.content
        }, 'me'));
        node.imwrite.val('').focus();
        log.imarea.scrollTop(log.imarea[0].scrollHeight);

        setTimeout(function () {
          log.imarea.append(log.html({
            time: '2014-04-26 0:38',
            name: xxim.nowchat.name,
            face: xxim.nowchat.face,
            content: config.autoReplay[(Math.random()
                * config.autoReplay.length) | 0]
          }));
          log.imarea.scrollTop(log.imarea[0].scrollHeight);
        }, 500);

        /*
        that.json(config.api.sendurl, data, function(datas){

        });
        */
      }

    };
    node.sendbtn.on('click', log.send);

    node.imwrite.keyup(function (e) {
      if (e.keyCode === 13) {
        log.send();
      }
    });
  };

//事件
  xxim.event = function () {
    var node = xxim.node;

    //主界面tab
    node.tabs.eq(0).addClass('xxim_tabnow');
    node.tabs.on('click', function () {
      var othis = $(this), index = othis.index();
      xxim.tabs(index);
    });

    //列表展收
    node.list.on('click', 'h5', function () {
      var othis = $(this), chat = othis.siblings('.xxim_chatlist'),
          parentss = othis.find("i");
      if (parentss.hasClass('fa-caret-down')) {
        chat.hide();
        parentss.attr('class', 'fa fa-caret-right');
      } else {
        chat.show();
        parentss.attr('class', 'fa fa-caret-down');
      }
    });

    //设置在线隐身
    node.online.on('click', function (e) {
      config.stopMP(e);
      node.setonline.show();
    });
    node.setonline.find('span').on('click', function (e) {
      var index = $(this).index();
      config.stopMP(e);
      if (index === 0) {
        node.onlinetex.html('在线');
        node.online.removeClass('xxim_offline');
      } else if (index === 1) {
        node.onlinetex.html('隐身');
        node.online.addClass('xxim_offline');
      }
      node.setonline.hide();
    });

    node.xximon.on('click', xxim.expend);
    node.xximHide.on('click', xxim.expend);

    //搜索
    node.xximSearch.keyup(function () {
      var val = $(this).val().replace(/\s/g, '');
      if (val !== '') {
        node.searchMian.show();
        node.closeSearch.show();
        //此处的搜索ajax参考xxim.getDates
        node.list.eq(3).html('<li class="xxim_errormsg">没有符合条件的结果</li>');
      } else {
        node.searchMian.hide();
        node.closeSearch.hide();
      }
    });
    node.closeSearch.on('click', function () {
      $(this).hide();
      node.searchMian.hide();
      node.xximSearch.val('').focus();
    });

    //弹出聊天窗
    config.chatings = 0;
    node.list.on('click', '.xxim_childnode', function () {
      var othis = $(this);
      xxim.popchatbox(othis);
    });

    //点击最小化栏
    node.layimMin.on('click', function () {
      $(this).hide();
      $('#layim_chatbox').parents('.xubox_layer').show();
    });

    //document事件
    dom[1].on('click', function () {
      node.setonline.hide();
      $('#layim_sendtype').hide();
    });
  };

//请求列表数据
  xxim.getDates = function (index) {
    var api = [config.api.friend, config.api.group, config.api.chatlog],
        node = xxim.node, myf = node.list.eq(index);
    myf.addClass('loading');
    config.json(api[index], {}, function (datas) {
      if (datas.status === 1) {
        var i = 0, myflen = datas.data.length, str = '', item;
        if (myflen > 1) {
          if (index !== 2) {
            for (; i < myflen; i++) {
              str += '<li data-id="' + datas.data[i].id
                  + '" class="xxim_parentnode">'
                  + '<h5><i class="fa fa-caret-right"></i><span class="xxim_parentname">'
                  + datas.data[i].name + '</span><em class="xxim_nums">（'
                  + datas.data[i].nums + '）</em></h5>'
                  + '<ul class="xxim_chatlist">';
              item = datas.data[i].item;
              for (var j = 0; j < item.length; j++) {
                str += '<li data-id="' + item[j].id
                    + '" class="xxim_childnode" type="' + (index === 0 ? 'one'
                        : 'group') + '"><img src="' + item[j].face
                    + '" class="xxim_oneface"><span class="xxim_onename">'
                    + item[j].name + '</span></li>';
              }
              str += '</ul></li>';
            }
          } else {
            str += '<li class="xxim_liston">'
                + '<ul class="xxim_chatlist">';
            for (; i < myflen; i++) {
              str += '<li data-id="' + datas.data[i].id
                  + '" class="xxim_childnode" type="one"><img src="'
                  + datas.data[i].face
                  + '"  class="xxim_oneface"><span  class="xxim_onename">'
                  + datas.data[i].name + '</span><em class="xxim_time">'
                  + datas.data[i].time + '</em></li>';
            }
            str += '</ul></li>';
          }
          myf.html(str);
        } else {
          myf.html('<li class="xxim_errormsg">没有任何数据</li>');
        }
        myf.removeClass('loading');
      } else {
        myf.html('<li class="xxim_errormsg">' + datas.msg + '</li>');
      }
    }, function () {
      myf.html('<li class="xxim_errormsg">请求失败</li>');
      myf.removeClass('loading');
    });
  };

//渲染骨架
  xxim.view = (function () {
    var xximNode = xxim.layimNode = $('<div id="xximmm" class="xxim_main">'
        + '<div class="xxim_top" id="xxim_top">'
        + '  <div class="xxim_search"><i class="fa fa-search"></i><input id="xxim_searchkey" /><span id="xxim_closesearch">×</span></div>'
        + '  <div class="xxim_tabs" id="xxim_tabs"><span class="xxim_tabfriend" title="好友"><i class="fa fa-user"></i></span><span class="xxim_tabgroup" title="群组"><i class="fa fa-users"></i></span><span class="xxim_latechat"  title="最近聊天"><i class="fa fa-clock-o"></i></span></div>'
        + '  <ul class="xxim_list" style="display:block"></ul>'
        + '  <ul class="xxim_list"></ul>'
        + '  <ul class="xxim_list"></ul>'
        + '  <ul class="xxim_list xxim_searchmain" id="xxim_searchmain"></ul>'
        + '</div>'
        + '<ul class="xxim_bottom" id="xxim_bottom">'
        + '<li class="xxim_online" id="xxim_online">'
        + '<i class="xxim_nowstate fa fa-check-circle"></i><span id="xxim_onlinetex">在线</span>'
        + '<div class="xxim_setonline">'
        + '<span><i class="fa fa-check-circle"></i>在线</span>'
        + '<span class="xxim_setoffline"><i class="fa fa-check-circle"></i>隐身</span>'
        + '</div>'
        + '</li>'
        + '<li class="xxim_mymsg" id="xxim_mymsg" title="我的私信"><i class="fa fa-comment"></i><a href="'
        + config.msgurl + '" target="_blank"></a></li>'
        + '<li class="xxim_seter" id="xxim_seter" title="设置">'
        + '<i class="fa fa-gear"></i>'
        + '<div>'

        + '</div>'
        + '</li>'
        + '<li class="xxim_hide" id="xxim_hide"><i class="fa fa-exchange"></i></li>'
        + '<li id="xxim_on" class="xxim_icon xxim_on fa fa-ellipsis-v"></li>'
        + '<div class="layim_min" id="layim_min"></div>'
        + '</ul>'
        + '</div>');
    dom[3].append(xximNode);

    xxim.renode();
    xxim.getDates(0);
    xxim.event();
    xxim.layinit();
  }());

}(window);

